<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="贾文清">
    <title></title>
    <style>
        /*  */
    main{
        width:900px;
        height: 350px;
        border: 1px solid red;
        margin: 20px auto;
    }
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        justify-content: space-around;
        padding-top: 15px;
    }
    ul li{
        display: block;
        width: 150px;
        height: 150px;
        border: 1px solid;
        opacity: 0.3;
    }
    ul li img{
        width: 150px;
        height: 150px;
    }
    ul li:hover{
        opacity:8;
    }
</style>
</head>
<body>
<main>
    <ul>
        <li><img src="./img/1.jpg" alt=""></li>
        <li><img src="./img/2.jpg" alt=""></li>
        <li><img src="./img/3.jpg" alt=""></li>
        <li><img src="./img/4.jpg" alt=""></li>
        <li><img src="./img/5.jpg" alt=""></li>
    </ul>
    <ul>
        <li><img src="./img/6.jpg" alt=""></li>
        <li><img src="./img/7.jpg" alt=""></li>
        <li><img src="./img/8.jpg" alt=""></li>
        <li><img src="./img/9.jpg" alt=""></li>
        <li><img src="./img/10.jpg" alt=""></li>
    </ul>
</main>
</body>
</html>